<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
    //监听函数
        var App = {
            template: `<div>
                <input type='text' v-model='myText' >
                {{myText}}
                <button @click="obj[0].name='rose'">监视btn</button>
            </div>`,
            data: function(){
                return {
                    myText: 'sss',
                    obj: [{name:'jack'}]
                }
            },
            watch: {
                myText: function(newV,oldV){
                    console.log(newV);
                    console.log(oldV);
                    if(newV === 'iloveyou'){
                        alert('我不爱你！')
                    }
                },
                // 监视复杂类型，无法监视的原因是因为监视的是对象的地址。地址没改，改的是同地址类型的值
                // 深度监视 ：object||array
                obj: {
                    deep: true,
                    handler: function(newV,oldV){
                        console.log('监视成功！');
                    }
                }
            }
        };

        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template:'<app/>'
        });

    </script>
</body>
</html>